﻿@page "/checkboxs"
@inject IStringLocalizer<Checkboxs> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <div class="row g-3 form-inline">
        <div class="col-12 col-sm-6">
            <Checkbox TValue="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged" DisplayText="@Localizer["StatusText1"]" ShowLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-sm-6">
            <Checkbox TValue="string" State="CheckboxState.UnChecked" OnStateChanged="@OnStateChanged" DisplayText="@Localizer["StatusText2"]" ShowLabel="true"></Checkbox>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Disabled">
    <div class="row g-3 form-inline">
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" IsDisabled="true" DisplayText="@Localizer["StatusText1"]" ShowLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.UnChecked" IsDisabled="true" DisplayText="@Localizer["StatusText2"]" ShowLabel="true"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Inrto"]" Name="ShowLabel">
    <div class="row g-3 form-inline">
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Primary"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Success"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Danger"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Info"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Warning"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Dark"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="DisplayText">
    <div class="row g-3 form-inline">
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Default" ShowLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Small" ShowLabel="true" Size="Size.Small"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Medium" ShowLabel="true" Size="Size.Medium"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Large" ShowLabel="true" Size="Size.Large"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraLarge" ShowLabel="true" Size="Size.ExtraLarge"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraExtraLarge" ShowLabel="true" Size="Size.ExtraExtraLarge"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="ShowAfterLabel">
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <div class="row g-3 form-inline">
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Default" ShowAfterLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Small" ShowAfterLabel="true" Size="Size.Small"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Medium" ShowAfterLabel="true" Size="Size.Medium"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Large" ShowAfterLabel="true" Size="Size.Large"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraLarge" ShowAfterLabel="true" Size="Size.ExtraLarge"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraExtraLarge" ShowAfterLabel="true" Size="Size.ExtraExtraLarge"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="OnStateChanged">
    <div class="row g-3 form-inline">
        <div class="col-12">
            <Checkbox DisplayText="@Localizer["Checkbox2Text"]" ShowLabel="true" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
        </div>
        <div class="col-12">
            <BootstrapInput @bind-Value="@BindValue" IsDisabled="true"></BootstrapInput>
        </div>
    </div>
    <BlockLogger @ref="BinderLog" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="BindString">
    <div class="row g-3 form-inline">
        <div class="col-12">
            <Checkbox DisplayText="@Localizer["Checkbox2Text"]" ShowLabel="true" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString"></Checkbox>
        </div>
        <div class="col-12">
            <BootstrapInput @bind-Value="@BindString"></BootstrapInput>
        </div>
    </div>
    <BlockLogger @ref="BinderLog" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="ValidateForm">
    <p>@((MarkupString)Localizer["P2"].Value)</p>
    <ValidateForm Model="@Model">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true"></Checkbox>
            </div>
            <div class="col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue1" ShowLabel="true" DisplayText="@Localizer["Checkbox3Text"]"></Checkbox>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
